<template>
  <div id="app" class="main-wrapper">
    <transition>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </transition>

    <mt-tabbar v-if="showBottom" v-model="selected" fixed style="border-top: 1px solid #eaeaea;">
      <mt-tab-item v-for="tab in tabList" @click="clickTab(tab)" :key="tab.name" :id="tab.name">
        <i slot="icon" :class="tab.icon" aria-hidden="true"></i>
        {{tab.title}}
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import axios from '@/api/axiosApi'

export default {
  name: 'app',
  data () {
    return {
      showBottom: true,
      selected: 'consultation',
      tabList: [
        {
          name: 'consultation',
          title: '校园资讯',
          icon: 'fa fa-fire'
        },
        {
          name: 'home',
          title: '广场',
          icon: 'fa fa-cubes'
        },
        {
          name: 'person',
          title: '个人中心',
          icon: 'fa fa-user'
        }
      ]
    }
  },
  mounted () {
    const to = this.$route
    if (to.name === 'home' || to.name === 'consultation' || to.name === 'person') {
      this.showBottom = true
      const openId = localStorage.getItem('openId')
      if (openId !== null) {
        this._getCount()
      }
    } else {
      this.showBottom = false
    }
  },
  watch: {
    selected (newItem) {
      this.$router.replace({
        path: '/wechat/' + newItem,
        query: this.$route.query
      })
    },
    '$route' (to, from) {
      // 显示和隐藏底部菜单
      if (to.name === 'home' || to.name === 'consultation' || to.name === 'person') {
        if (to.name === 'home') {
          this.selected = 'home'
        } else if (to.name === 'consultation') {
          this.selected = 'consultation'
        } else if (to.name === 'person') {
          this.selected = 'person'
          const openId = localStorage.getItem('openId')
          if (openId !== null) {
            this._getCount()
          }
        }
        this.showBottom = true
      } else {
        this.showBottom = false
      }
    }
  },
  methods: {
    _getCount () {
      const _self = this
      const openId = localStorage.getItem('openId')
      if (openId) {
        axios.post('/commons/getCategoryCountMap', {studentId: openId}, (data) => {
          let temp = _self.$store.getters.count
          for (let index in temp) {
            temp[index] = data[index]
            if (typeof temp[index] === 'undefined' || temp[index] === null) {
              temp[index] = 0
            }
          }
          _self.$store.commit('changeCount', temp)
        })
      }
    }
  }
}
</script>

<style lang="stylus">
@import '~assets/stylus/variable.styl';
.mint-header {
  background-color: $color-theme
}
.mint-loadmore-content .mint-loadmore-bottom{
  padding-bottom: 68px;
}
.mint-swipe-indicators {
  z-index: 99
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.main-wrapper {
  .mint-tab-item {
    i {
      font-size: 25px;
    }
  }

  .mint-tab-item.is-selected {
    color: $color-theme;
  }
}
</style>

